<template>
  <div>
    <el-form ref="elForm" :model="dataApi" :rules="rules" size="medium" label-width="100px">
      <el-form-item label="API名称" prop="name">
        <el-input v-model="dataApi.name" placeholder="请输入API名称"  clearable
           :style="{width: '100%'}"></el-input>
      </el-form-item>
      <el-form-item label="API地址" prop="url">
        <el-input v-model="dataApi.url" placeholder="请输入API地址"  clearable
           :style="{width: '100%'}"></el-input>
      </el-form-item>
      <el-form-item label="请求方式" prop="type">
        <el-select v-model="dataApi.type" placeholder="请选择请求方式" clearable :style="{width: '100%'}">
          <el-option v-for="(item, index) in typeOptions" :key="index" :label="item.label"
            :value="item.value" :disabled="item.disabled"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="描述" prop="description">
        <el-input v-model="dataApi.description" type="textarea" placeholder="请输入描述"
          :autosize="{minRows: 4, maxRows: 4}" :style="{width: '100%'}"></el-input>
      </el-form-item>
      <el-form-item size="large" style="float:right;">
        <el-button type="primary" @click="submitForm">下一步</el-button>
        <el-button @click="resetForm">取消</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
export default {
  components: {},
  props: {
      stepNumber:Object,
  },
  data() {
    return {
      dataApi: {
        id:'',
        name: '',
        url: '',
        type: 'POST',
        description: undefined,
      },
      rules: {
        name: [{
          required: true,
          message: '请输入API名称',
          trigger: 'blur'
        }],
        url: [{
          required: true,
          message: '请输入API地址',
          trigger: 'blur'
        }],
        type: [{
          required: true,
          message: '请选择请求方式',
          trigger: 'change'
        }]
       
      },
      typeOptions: [{
        "label": "POST",
        "value": "POST"
      }, {
        "label": "GET",
        "value": "GET"
      }],
    }
  },
  computed: {
  },
  watch: {},
  created() {},
  mounted() {
    if(this.$route.params.dataApi){
      this.stepNumber.dataApi=this.$route.params.dataApi;
      this.dataApi = this.$route.params.dataApi;
    }
  },
  methods: {
    submitForm() {
    var _this = this;
      this.$refs['elForm'].validate(valid => {
        if (!valid) return
        // TODO 提交表单
       if(_this.dataApi.id == ''){
        this.axios
        .post(this.HOST+"/dataapi/create", {
          name: _this.dataApi.name,
          url: _this.dataApi.url,
          type: _this.dataApi.type,
          description: _this.dataApi.description,
          categoryId: _this.$route.params.categoryId,
        })
        .then(function(res) {
            debugger;
            res = res.data;
            if(res.data){
               _this.stepNumber.dataApi=res.data;
            }
            _this.stepNumber.active ++;
        })
        .catch(function(err) {
          console.log(err);
        });
      }else{
        this.axios
          .post(this.HOST+"/dataapi/update", {
            name: _this.dataApi.name,
            url: _this.dataApi.url,
            type: _this.dataApi.type,
            description: _this.dataApi.description,
            id:_this.dataApi.id
          })
          .then(function(res) {
              debugger;
              res = res.data;
              if(res.data){
                _this.stepNumber.dataApi=res.data;
              }
              _this.stepNumber.active ++;
          })
          .catch(function(err) {
            console.log(err);
          });
        }
      })
    },
    resetForm() {
      this.$router.push("/");
    },
  }
}

</script>
<style>
</style>
